<template>
  <el-menu :default-active="activeMenu" class="sidebar-menu" router>
    <div class="logo">
      
    </div>
    <template v-for="routeItem in menuRoutes" :key="routeItem.path">
      <el-menu-item v-if="!routeItem.children || routeItem.children.length === 0" :index="routeItem.path">
        <el-icon><component :is="routeItem.meta.icon" /></el-icon>
        <span>{{ routeItem.meta.title }}</span>
      </el-menu-item>
      <el-sub-menu v-else :index="routeItem.path">
        <template #title>
          <el-icon><component :is="routeItem.meta.icon" /></el-icon>
          <span>{{ routeItem.meta.title }}</span>
        </template>
        <el-menu-item v-for="child in routeItem.children" :key="child.path" :index="child.path">
          {{ child.meta.title }}
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'

const route = useRoute()
const router = useRouter()
const activeMenu = computed(() => route.path)

const menuRoutes = computed(() => {
  const mainRoute = router.options.routes.find(r => r.path === '/')
  if (!mainRoute || !mainRoute.children) return []

  const processRoutes = (routes, basePath = '/') => {
    return routes
      .filter(r => r.meta && !r.meta.hidden)
      .map(r => {
        const fullPath = (basePath + r.path).replace(/\/\//g, '/')
        const processedRoute = {
          ...r,
          path: fullPath,
        }
        if (r.children) {
          processedRoute.children = processRoutes(r.children, `${fullPath}/`)
        }
        return processedRoute
      })
  }
  return processRoutes(mainRoute.children.filter(r => r.path !== ''))
})
</script>

<style lang="scss" scoped>
.sidebar-menu {
  height: 100vh;
  border-right: none;
  box-shadow: 2px 0 8px 0 rgba(0,0,0,0.03);
  .logo {
    display: flex;
    align-items: center;
    height: 60px;
  }
  :deep(.el-menu-item.is-active) {
    background: rgba(64,158,255,0.12) !important;
    color: #409eff !important;
    border-right: 3px solid #409eff;
  }
  :deep(.el-menu-item) {
    border-radius: 4px 0 0 4px;
    margin: 0 4px;
    transition: background 0.2s;
    &:hover {
      background: rgba(255,255,255,0.06) !important;
      color: #409eff !important;
    }
  }
}
</style> 